<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="选择班次"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="1200px"
    >
        <section>
            <el-form :inline="false" :model="filter" ref="filterRef"  size="mini"  class="form-filter" label-width="80px" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
                <el-form-item label="搜索类型">
                  <el-button-group>
                    <el-button :type="searchType == SEARCH_TYPE_BY_DATE ? 'primary': ''" icon=""
                      @click="switchSearchType(SEARCH_TYPE_BY_DATE)">日期搜索</el-button>
                    <el-button :type="searchType == SEARCH_TYPE_BY_PRECISE ? 'primary': ''"
                      @click="switchSearchType(SEARCH_TYPE_BY_PRECISE)">精确搜索</el-button>
                  </el-button-group>
                </el-form-item>

                <div v-show="searchType == SEARCH_TYPE_BY_DATE">
                    <el-form-item label="日期" prop="dateRange">
                        <div style="display:flex;">
                            <div>
                                  <el-button-group>
                                    <el-button :type="index == dateIndex ? 'primary': ''" v-for="(item,index) in todayOptions" :key="index"
                                      @click="selDate(index)" size="small">{{item.name}}</el-button>
                                  </el-button-group>
                              </div>
                              <div style="margin-left:10px;">
                                  <el-date-picker type="daterange" v-model="filter.dateRange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
                                    range-separator="至" clearable size="small" @change="selDateRange">
                                  </el-date-picker>
                              </div>
                          </div>
                    </el-form-item>

                    <el-form-item label="线路" prop="lineIds">
                        <el-checkbox-group v-model="filter.lineIds">
                          <el-checkbox v-for="(item, index) in lineOptions" :key="index" :label="item.id">
                            {{item.lineName}}
                          </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="时间" prop="timeArr" style="display:inline-block;">
                          <el-select v-model="filter.timeArr" multiple clearable filterable>
                              <el-option
                                  v-for="item in timeOptions"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                              />
                          </el-select>
                    </el-form-item>

                   <el-form-item label="司机" prop="driverId" style="display:inline-block;">
                       <el-select
                           v-model="filter.driverId"
                           filterable
                           clearable
                       >
                           <el-option
                               v-for="item in driverOptions"
                               :key="item.id"
                               :label="item.driverName"
                               :value="item.id"
                           />
                       </el-select>
                   </el-form-item>

                   <el-form-item label="车型" prop="vehicleTypeId" style="display:inline-block;">
                       <el-select
                           v-model="filter.vehicleTypeId"
                           filterable
                            clearable
                       >
                           <el-option
                               v-for="item in vehicleTypeOptions"
                               :key="item.id"
                               :label="item.vehicleTypeName"
                               :value="item.id"
                           />
                       </el-select>
                   </el-form-item>

                    <el-form-item label="班次状态" prop="status" style="display:inline-block;">
                      <el-select v-model="filter.status" clearable filterable>
                        <el-option v-for="item in Dict.enums.arrangeStatus" :key="item.code" :label="item.name"
                          :value="item.code" />
                      </el-select>
                    </el-form-item>

                </div>
                <!-- 日期搜索 end -->

                <!-- 精确搜索 start -->
                <div v-show="searchType == SEARCH_TYPE_BY_PRECISE">
                  <el-form-item label="班次编码" prop="arrangeCode" style="display:inline-block;">
                    <el-input v-model="filter.arrangeCode" placeholder="请输入" clearable size="small" />
                  </el-form-item>
                  <el-form-item label="司机姓名" prop="driverName" style="display:inline-block;">
                    <el-input v-model="filter.driverName" placeholder="请输入" clearable size="small"  />
                  </el-form-item>
                  <el-form-item label="司机电话" prop="driverPhone" style="display:inline-block;">
                    <el-input v-model="filter.driverPhone" placeholder="请输入" clearable size="small"  />
                  </el-form-item>
                  <el-form-item label="车牌号" prop="licensePlateNumber" style="display:inline-block;">
                    <el-input v-model="filter.licensePlateNumber" placeholder="请输入" clearable size="small"  />
                  </el-form-item>
                </div>
                <!-- 精确搜索 end -->

                <el-form-item>
                    <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                    <el-button @click="resetFilter()" icon="el-icon-refresh-left">重置</el-button>
                </el-form-item>
            </el-form>
            <div style="margin-top:20px;">
                <el-table
                    v-loading="loading"
                    style="width: 100%"
                    :data="page.records"
                    border
                    stripe
                    @expand-change="openArrangeSectionList"
                    :header-cell-style = "headerCellStyle"
                >
                    <el-table-column type="expand">
                        <template #default="props">
                            <div>
                                <el-table :data="sectionList[props.row.arrangeCode]" border style="">
                                    <el-table-column prop="arrangeSectionCode" label="班次段编码" width="130"/>
                                    <el-table-column prop="lineSectionName" label="班次段名称"/>
                                    <el-table-column prop="startTimeFormat" label="发车时间"/>
                                    <el-table-column label="起点">
                                        <template #default="scope">
                                            {{scope.row.startStationName}}【{{scope.row.startCarParkName}}】
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="终点">
                                        <template #default="scope">
                                            {{scope.row.endStationName}}【{{scope.row.endCarParkName}}】
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="didSaleSeatNum" label="已售/占座/剩余/总数">
                                        <template #default="scope">
                                            <b :class="scope.row.didSaleSeatNum>0?'red':''">{{ scope.row.didSaleSeatNum }}</b> / {{ scope.row.lockSeatNum }} / {{ scope.row.surplusSeatNum }} / {{ scope.row.canSaleSeatNum }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="状态" width="80px">
                                        <template #default="scope">
                                            <el-tag v-if="scope.row.status" type="success">正常</el-tag>
                                            <el-tag v-else type="info">撤消</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="60">
                                        <template #default="scope">
                                            <el-button @click="handleSelLineSection(scope.row)" size="mini" type="text">选择</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="arrangeCode" label="班次编码" width="130"/>
                    <el-table-column prop="lineName" label="线路名称"/>
                    <el-table-column prop="startTimeFormat" label="始发时间"/>
                    <el-table-column prop="driverName" label="司机"/>
                    <el-table-column prop="didSaleSeatNum" label="已售座位数">
                        <template #default="scope">
                            <b :class="scope.row.didSaleSeatNum > 0 ?'red':''">{{ scope.row.didSaleSeatNum }}</b>
                        </template>
                    </el-table-column>
                    <el-table-column prop="canSaleSeatNum" label="车型座位数"/>
                    <el-table-column label="状态" width="140">
                        <template #default="scope">
                            <el-tag :type="scope.row.statusStyle">
                                {{ scope.row.statusName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                background
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 50,100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    style="margin-top:20px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </section>
    </el-dialog>
</template>
<script>
import {ArrangeApi} from '@/api/intercity/ArrangeApi'
import {ArrangeSectionApi} from '@/api/intercity/ArrangeSectionApi'
import {DriverApi} from '@/api/user/DriverApi'
import {LineApi} from '@/api/intercity/LineApi'
import {VehicleTypeApi} from '@/api/user/VehicleTypeApi'
import {Common} from '@/utils/common'

export default {
    name: 'SelArrange',
    components: {},
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                dateRange:[],
                lineIds:[],
                timeArr:[],
                driverId:'',
                vehicleTypeId:'',
                status:'',

                arrangeCode:'',
                driverName:'',
                driverPhone:'',
                licensePlateNumber:''
            },
            loading: false,
            sectionList: {},
            createArrangeRef: null,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            },

            // 搜索类型 1日期搜索，2精确搜索
            searchType: 1,
            // 日期搜索
            SEARCH_TYPE_BY_DATE: 1,
            // 精确搜索
            SEARCH_TYPE_BY_PRECISE: 2,

            // 日期列表
            todayOptions: [],
            dateIndex: '',

            lineOptions: [],
            timeOptions: [],
            driverOptions: [],
            vehicleTypeOptions: [],
            dialogVisible:false

        }
    },
    created() {

    },
    methods: {
        show() {
            this.dialogVisible = true

            this.todayOptions = Common.todayOptions()
            this.timeOptions = Common.timeOptions()
            this.getLineList()
            this.getDriverOptions()
            this.getVehicleTypeOptions()
            this.selDate(2)
        },
        //************筛选start*************
        switchSearchType(type){
            this.searchType = type
            this.getPage()
        },
        selDate(index){
            this.dateIndex = index
            this.filter.dateRange = [this.todayOptions[index].date, this.todayOptions[index].date]
            this.getPage()
        },
        selDateRange(){
            this.dateIndex = -1
            this.getPage()
        },
        resetFilter() {
            if(this.searchType == this.SEARCH_TYPE_BY_DATE){
                this.filter.dateRange = []
                this.filter.lineIds = []
                this.filter.timeArr = []
                this.filter.driverId = ''
                this.filter.vehicleTypeId = ''
                this.filter.status = ''
                this.selDate(2)
            }else{
                this.filter.arrangeCode = ''
                this.filter.driverName = ''
                this.filter.driverPhone = ''
                this.filter.licensePlateNumber = ''
                this.page.records=[]
            }
        },
        //************筛选end*************

        // 获取线路列表
        getLineList() {
            LineApi.getList().then((data) => {
                this.lineOptions = data
            })
        },

        // 获取线路列表
        getDriverOptions() {
            DriverApi.getList({status:true}).then((data) => {
                this.driverOptions = data
            })
        },

        // 获取车型列表
        getVehicleTypeOptions() {
            VehicleTypeApi.getList([]).then((data) => {
                this.vehicleTypeOptions = data
            })
        },
        // 获取列表
        getPage() {
            this.sectionList = {}
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size
            }
            if(this.searchType == this.SEARCH_TYPE_BY_DATE){
                params['dateRange']= [this.filter.dateRange[0]+'T00:00:00',this.filter.dateRange[1]+'T23:59:59']
                params['lineIds']= this.filter.lineIds
                params['timeArr']= this.filter.timeArr
                params['driverId']= this.filter.driverId
                params['vehicleTypeId']= this.filter.vehicleTypeId
                params['status']= this.filter.status
            }else{
                params['arrangeCode']= this.filter.arrangeCode
                params['driverName']= this.filter.driverName
                params['driverPhone']= this.filter.driverPhone
                params['licensePlateNumber']= this.filter.licensePlateNumber

                if(!this.filter.arrangeCode && !this.filter.driverName && !this.filter.driverPhone  && !this.filter.licensePlateNumber){
                    this.page.records=[]
                    return
                }
            }

            this.loading = true
            ArrangeApi.getPage(params).then((response) => {
                for (let i = 0; i < response.records.length; i++) {
                    response.records[i]['sectionList'] = []
                    response.records[i]['startTimeFormat'] = Common.timeFormat(response.records[i].startTime,4)
                }

                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        openArrangeSectionList(row, expanded) {
            if (this.sectionList[row.arrangeCode] === undefined) {
                this.getArrangeSectionList(row.arrangeCode)
            }
        },
        getArrangeSectionList(arrangeCode) {
            ArrangeSectionApi.getListByArrangeCode(arrangeCode).then((response) => {
                response.forEach(function(item){
                    item['startTimeFormat'] = Common.timeFormat(item.startTime,4)
                })
                this.$set(this.sectionList, arrangeCode, response)
            }).catch((err) => {
            })
        },

        handleSelLineSection(arrangeSectionItem){
            this.$emit('refresh',arrangeSectionItem)
            this.dialogVisible = false
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        }
    }
}

</script>

<style lang="scss" scoped>
    ::v-deep .el-table__expanded-cell{ padding-left: 48px; padding-right:0px;}
    .red{font-weight:bold; color:#900;}
</style>
